<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/layout/layout.xhtml">
	<ui:define name="contentPart">
		<p:growl id="messages" sticky="false" life="#{appMsg.growlduration}"
			showDetail="true" globalOnly="true" />
		
		<script language="javascript">
			function playNext(){
				var btn = document.getElementById('formId:nextBtn');
				if(typeof btn.click == 'function'){
					btn.click();
				} else if(typeof btn.onclick == 'function'){
					btn.onclick();
				}
			}
		</script>
		
		<h:form id="formId">		
			<p:panel id="rpnl" header="Source file(s)">
				<h:outputText id="fileValue" value="Selected ressource: #{treeBean.selectedNode.label}" />
				<h:panelGrid columns="1">
					<p:commandButton actionListener="#{overviewAction.loadStream}" value="Play" update="mediaPnl" rendered="#{treeBean.lastSelectedInstanceOfURI}"/>
					<p:commandButton actionListener="#{overviewAction.addToPlayList}" value="Add" update="playListPnl" rendered="#{!treeBean.lastSelectedInstanceOfURI}"/>
				</h:panelGrid>
			</p:panel>
			
			<p:panel id="mediaPnl" header="Media player">
				<h:panelGrid rendered="#{overviewAction.mp3PlayerDisplayed}">
					<audio controls="controls" src="#{overviewAction.stream}" autoplay="true" onended="playNext()">
						Your browser does not support the HTML5 audio element.
					</audio>
				</h:panelGrid>
				<h:panelGrid rendered="#{overviewAction.videoPlayerDisplayed}">
					<object type="application/x-vlc-plugin" data="#{overviewAction.stream}" width="400" height="300" id="video1">
		     			<param name="movie" value="#{overviewAction.stream}"/>
		     			<embed type="application/x-vlc-plugin" name="video1"
		     			autoplay="yes" loop="no" width="400" height="300"
		     			target="#{overviewAction.stream}" />
					</object>
				</h:panelGrid>
			</p:panel>
			
			<p:panel id="playListPnl" widgetVar="playListPnl" header="Play list">
				<p:dataTable value="#{overviewAction.playList}" var="file" paginator="true" rows="10" rowStyleClass="#{file.absolutePath eq overviewAction.selectedResource.absolutePath ? 'cellLightYellow' : 'cellWhite'}">
					
					<p:column sortBy="#{file.name}" headerText="Name">
						<h:outputText value="#{file.name}"/>
					</p:column>
					
					<p:column style="width:#{appMsg.columnbuttonwidth}; text-align:center" >
						<p:commandButton action="#{overviewAction.playSelectedResource}" styleClass="buttonTable" icon="buttonPlay" update=":formId:mediaPnl :formId:playListPnl" title="Play selected ressource">
							<f:setPropertyActionListener target="#{overviewAction.selectedResource}" value="#{file}"/>
						</p:commandButton>
					</p:column>
					
					<p:column style="width:#{appMsg.columnbuttonwidth}">
						<p:commandButton action="#{overviewAction.removeSelectedResource}" styleClass="buttonTable" icon="buttonRemove" title="Remove from play list" update=":formId:playListPnl">
							<f:setPropertyActionListener target="#{overviewAction.selectedResource}" value="#{file}"/>
						</p:commandButton>
					</p:column>
				</p:dataTable>
				
				<h:panelGrid columns="3">
					<p:commandButton id="previousBtn" actionListener="#{overviewAction.playPrevious}" value="Previous" update="playListPnl :formId:mediaPnl"/>
					<p:commandButton actionListener="#{overviewAction.emptyPlayList}" value="Empty" update="playListPnl"/>
					<p:commandButton id="nextBtn" actionListener="#{overviewAction.playNext}" value="Next" update="playListPnl :formId:mediaPnl"/>
				</h:panelGrid>
			</p:panel>
		</h:form>
	</ui:define>
</ui:composition>
</html>